import { useState } from "react"
import StateHook1 from "./pages/state-hook1"
import StateHook2 from "./pages/state-hook2"
import EffectHook from "./pages/effect-hook"
import ContextHook from "./pages/context-hook"
import RefHook from "./pages/ref-hook"
import OtherHook from "./pages/other-hook";

import ContextDemo from "./lib/context-demo"

const ThemeData = {
  background: 'red',
  color: 'blue'
}

function App() {
  const [theme, setTheme] = useState(ThemeData)

  return (
    <div className="App">
      {/* <button onClick={() => setTheme({background: '#000', color: '#fff', fontSize: 40})}>修改theme</button> */}
      <br />
      <ContextDemo.Provider value={theme}>
        {/* <StateHook1 /> */}
        {/* <StateHook2 />
        <EffectHook />
        <ContextHook /> */}
        {/* <RefHook /> */}
        <OtherHook />
      </ContextDemo.Provider>
    </div>
  );
}

export default App;
